<template>
	<view class="cate">
		<!-- 商品分类列表 -->
		<view class="cate-list">
			<view class="item" :class="{active:item.id==selectedId}" v-for="(item,index) in cateList" :key="index"
				@tap="selecteCate(item.id)">
				{{item.name}}
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="cate-goods"></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	}
	from '@dcloudio/uni-app'
	onLoad(() => {
		getCateList()
	})
	let selectedId = ref(0)

	function selecteCate(id) {
		selectedId.value = id
	}
	// 商品分类
	let cateList = ref([])
	async function getCateList() {
		let res = await uni.$post("/categoryListLevel", {
			level: 1
		})
		// console.log(res)
		if (res.code == 200) {
			cateList.value = res.result;
			// 在首位添加 ‘全部’
			cateList.value.unshift({
				id: 0,
				name: '全部',

			})
		}
		// console.log(cateList.value)
	}
	// let res = uni.getWindowInfo()
	// console.log(res)

	// 商品列表
	const goodsList = ref([])
	async function getCateGoodsList(cid) {
		if (cid == 0) { //选中的是全部商品
			uni.$post("/goodsListPage", {
				"page": 1,
				"number": 20
			})
			if (res.code == 200) {
				goodsList.value = res.goodsList
			}
		} else { //选中的是一个二级类别
			res = await uni.$post("/goodsListPage_catTwo", {
				"cat_two_id": 39,
				"page": 3,
				"number": 3
			})
			if (res.code == 200) {
				goodsList.value = res.goodsList
			}
		}
		
	}
</script>
<style>
	.cate>.cate-list {
		width: 180rpx;
		border: 1px solid red;
		height: calc(100vh - 96px);
		/* height: 96vh; */
	}

	.cate>.cate-list>.item {
		font-size: 26rpx;
		text-align: center;
		height: 88rpx;
		line-height: 80rpx;
	}

	.cate>.cate-list>.active {
		background-color: #ff6700;
		color: #fff;
	}
</style>